<template>
    <div class="comic-detail-container" ref="container">
        <div style="height: 5px"></div>
        <div class="base-msg-container">
            <div class="base-msg-box">
                <div style="display: flex">
                    <div class="img-container">
                        <div style="position: relative">
                            <img v-show="finished" src="../../../../img/jiaobiao.png" class="jiaobiao">
                            <img :src="message.data.comic.thumb.fileServer + '/static/' + message.data.comic.thumb.path"
                                 class="img">
                        </div>
                    </div>

                    <div style="position: relative">
                        <div class="title" @click="showDis(message.data.comic.title)">{{
                                message.data.comic.title
                            }}
                        </div>
                        <div class="anther" @click="showDis(message.data.comic.author)">作者：{{
                                message.data.comic.author
                            }}
                        </div>
                        <div class="avanar" @click="showDis(message.data.comic.chineseTeam)">
                            汉化组：{{ message.data.comic.chineseTeam }}
                        </div>
                        <div class="like-and-container">
                            <like-and-read path="star-circle.png"
                                           :text="message.data.comic.totalViews + '观看'"></like-and-read>
                            <like-and-read path="heart-blod.png"
                                           :text="message.data.comic.totalLikes +'喜欢'"></like-and-read>
                        </div>
                    </div>

                </div>


                <div class="label-container">
                    <div class="label-view">
                        <label-mid v-for="item in message.data.comic.tags" :key="item" :text="item"></label-mid>
                    </div>
                </div>
                <div style="height: 10px"></div>

                <div class="dis-container">
                    <div class="dis-box">{{ message.data.comic.description }}</div>
                </div>

                <div class="little-stick">
                    <div></div>
                </div>

                <div class="opt-container">
                    <div>
                        <like-and-read path="comment.png" text="评论" @touchstart="toComment"></like-and-read>
                        <div style="width: 100px;"></div>
                        <like-and-read :path="isLiked?'heart-fill.png':'heart.png'"
                                       :text="isLiked?'已推荐':'推荐'" @touchstart="like"></like-and-read>
                        <div style="width: 100px;"></div>
                        <like-and-read :path="isFavourite?'star-fill.png':'star.png'"
                                       :text="isFavourite?'已收藏':'收藏'" @touchstart="fav"></like-and-read>
                    </div>
                </div>
                <div style="height: 10px"></div>
            </div>
        </div>


        <div style="height: 5px"></div>
        <div class="update-container">
            <div class="update-box">
                <div class="update-view">
                    <img class="update-head-img"
                         :src="message.data.comic._creator.avatar.fileServer + '/static/' + message.data.comic._creator.avatar.path">
                    <div style="width: 10px;"></div>
                    <div>
                        <div style="display: flex; color: white">
                            <label-plus :text="'Lev' + message.data.comic._creator.level"></label-plus>
                            <label-plus :text="message.data.comic._creator.title"></label-plus>
                            <label-plus :text="message.data.comic._creator.role"></label-plus>
                        </div>
                        <div>{{ message.data.comic._creator.name }}</div>
                        <div style="font-size: x-small">更新于{{ message.data.comic.updated_at }}</div>
                    </div>
                </div>
            </div>
        </div>


        <div style="height: 5px"></div>
        <div class="cut-container">
            <div class="cut-box">
                <div v-for="item in message.episodes" :key="item.order" class="btn-container">
                    <van-button color="linear-gradient(to right, #f5b1b8, #f1929d)"
                                @click="toPicture(item.order)">{{ item.title }}
                    </van-button>
                </div>
                <div class="btn-container" v-show="isShowNextBtn">
                    <van-button color="linear-gradient(to right, #f5b1b8, #f1929d)" @touchstart="showMore">More
                    </van-button>
                </div>

            </div>
        </div>
        <div style="height: 60px"></div>
    </div>
    <van-overlay v-model:show="showToast">
        <loading-box>转呀转呀转呀转...</loading-box>
    </van-overlay>
</template>

<script>
//import cutBtn from "@/components/main/part/cutBtn";
import {useRoute} from 'vue-router'
import likeAndRead from "@/components/main/part/likeAndRead";
import {onActivated, onMounted, reactive, ref} from "vue";
import {_fav, _like, _getComicInfo, _getEpisodes} from "@/apis/comicAPI";
import axios from "axios";
import router from "@/router";
import labelPlus from "@/components/main/part/label";
import loadingBox from "@/components/main/part/loadingBox";
import labelMid from "@/components/main/part/labelMid";
export default {
    name: "comicDetail",
    components: {
        likeAndRead,
        labelPlus,
        labelMid,
        loadingBox
        //cutBtn
    },
    setup() {
        let route = useRoute()
        let comicId = route.query.id;
        let finished = ref();
        let isFavourite = ref();
        let isLiked = ref();
        let showToast = ref(true);
        let index = 1;
        let isShowNextBtn = ref(true)
        let message = reactive({
            data: {
                comic: {
                    totalLikes: '',
                    totalViews: '',
                    title: '',
                    author: '',
                    description: '',
                    chineseTeam: '',
                    finished: '',
                    isFavourite: '',
                    isLiked: '',
                    _creator: {
                        avatar: {
                            fileServer: '',
                            path: ''
                        },
                        name: '',
                        title: '',
                        role: ''
                    },
                    updated_at: '',
                    thumb: {
                        fileServer: '',
                        path: ''
                    },
                }
            },
            episodes: [],
            pages: ''
        })

        function showDis(value) {
            router.push({path: '/comicSearch', query: {keyword: value}})
        }

        /*
        * 添加到收藏
        * */
        async function fav() {
            const data = {
                book_id:comicId
            }
            await _fav(data,res => {
                if (res.data.data.action == "favourite") {
                    alert("已添加到收藏")
                    isFavourite.value = true
                } else {
                    alert("已取消收藏")
                    isFavourite.value = false
                }
            },()=>{
                alert("失败，请重试")
            })
        }

        /*
        * 推荐
        * */
        async function like() {
            const data = {
                book_id: comicId
            }
            await _like(data, res => {
                if (res.data.data.action == "like") {
                    alert("已推荐")
                    isLiked.value = true
                } else {
                    alert("已取消推荐")
                    isLiked.value = false
                }
            },()=>{
                alert("失败，请重试")
            })
        }

        /*
        * 前往评论页面
        * */
        function toComment() {
            let imgPath = message.data.comic.thumb.fileServer + '/static/' + message.data.comic.thumb.path;
            router.push({
                path: '/comicComment', query: {
                    book_id: comicId,
                    img_path: imgPath,
                    title: message.data.comic.title,
                    author: message.data.comic.author,
                    chinese_team: message.data.comic.chineseTeam
                }
            })
        }

        /*
        * 前往漫画页面
        * */
        function toPicture(ep_id) {
            router.push({path: '/comicPicture', query: {book_id: comicId, ep_id: ep_id}})
        }

        /*
        * 得到漫画基础信息
        * */
        async function getMsg(id) {
            const data = {
                id,
            }
            showToast.value = true
            await _getComicInfo(data, res => {
                showToast.value = false
                console.log(res.data)
                message.data = res.data.data
                finished.value = res.data.data.comic.finished
                isFavourite.value = res.data.data.comic.isFavourite
                isLiked.value = res.data.data.comic.isLiked
            }, () => {
                showToast.value = false
                alert("Error")
            })
        }

        /*
        * 得到漫画分话
        * */
        async function getEpisodes(id) {
            const data = {
                id,
                page: index
            }
            await _getEpisodes(data, res => {
                console.log(res.data)
                message.episodes = res.data.data.eps.docs;
                message.pages = res.data.data.eps.pages;
                console.log(message.pages)
                if (message.pages == 1) {
                    isShowNextBtn.value = false
                }
            })
            index++
        }

        function showMore() {
            axios.get("http://192.168.0.10:8848/comicComment?book_id=" + comicId + "&page=" + index).then(res => {
                for (let item of res.data.data.eps.docs) {
                    message.episodes.push(item)
                }
                if (index > message.pages) {
                    isShowNextBtn.value = false
                }
                console.log(message.comicList)
            })
            index++
        }

        onMounted(() => {
            getMsg(comicId)
            getEpisodes(comicId)
        })

        onActivated(() => {
            let newComicId = route.query.id
            if (newComicId != comicId) {
                comicId = newComicId
                index = 1
                getMsg(newComicId)
                getEpisodes(newComicId, index)
            }
        })

        return {
            message,
            finished,
            isLiked,
            isFavourite,
            isShowNextBtn,
            showToast,
            showDis,
            toPicture,
            fav,
            like,
            toComment,
            showMore,
        }

    },
    methods: {
        setContainer() {
            let width = document.documentElement.clientWidth;
            this.$refs.container.style.width = width + 'px';
        },
    },
    mounted() {
        this.setContainer()
    }
}
</script>

<style scoped>
.comic-detail-container {
    background-color: #e1e1e1;
}

.base-msg-container {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.base-msg-box {
    width: 98%;
    height: 98%;
    background-color: white;
    border-radius: 5px;
}

.cut-container {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cut-box {
    width: 98%;
    display: flex;
    min-height: 150px;
    border-radius: 5px;
    background-color: white;
    justify-content: flex-end;
    flex-flow: row-reverse wrap;
}

.btn-container {
    width: 25%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.img-container {
    position: relative;
    width: 135px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
}

.img {
    width: 135px;
    height: auto;
}

.jiaobiao {
    position: absolute;
    top: 0;
    width: 50px;
    height: 50px;
}

.title {
    font-size: x-large;
    display: flex;
    height: auto;
    color: #f1929d;
    overflow: hidden;
    max-height: 60px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 这里是超出几行省略 */
    text-overflow: ellipsis;
    margin-top: 10px;
    margin-right: 10px;
}

.anther {
    font-size: larger;
    margin-top: 10px;
    height: auto;
    text-decoration: underline;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* 这里是超出几行省略 */
    text-overflow: ellipsis;
    max-height: 25px;
    overflow: hidden;
}

.avanar {
    margin-top: 10px;
    font-size: large;
    height: auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* 这里是超出几行省略 */
    text-overflow: ellipsis;
    max-height: 25px;
    overflow: hidden;
}

.like-and-container {
    position: absolute;
    bottom: 14px;
    width: 100%;
    height: 40px;
    display: flex;
}

.little-stick {
    width: 100%;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.little-stick div {
    width: 94%;
    height: 4px;
    border-radius: 2px;
    background-color: #f1929d;
}

.label-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.label-view {
    width: 94%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    flex-flow: row-reverse wrap;
}

.opt-container {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.opt-container div {
    width: 80%;
    height: 36px;
    display: flex;
    justify-content: space-around;
}

.dis-container {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dis-box {
    width: 94%;
    height: auto;
    font-size: small;
    display: -webkit-box;
    min-height: 50px;
}

.update-container {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.update-box {
    width: 98%;
    height: 60px;
    background-color: white;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.update-view {
    width: 94%;
    height: 90%;
    display: flex;
}

.update-head-img {
    border-style: solid;
    border-width: 4px;
    border-color: #f1929d;
    border-radius: 27px;
    width: 46px;
    height: 46px;
    background-color: #3B666B;
}
</style>